<template>
  <div>
    <el-card class="crumbs-card">
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/main/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/main/review' }">审核</el-breadcrumb-item>
          <el-breadcrumb-item v-if="subMenuName">{{ subMenuName }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-card>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      menu-trigger="click"
    >
      <el-menu-item index="1" :class="{ 'is-active': activeIndex === '1' }">工作概览</el-menu-item>
      <el-menu-item index="2" :class="{ 'is-active': activeIndex === '2' }" v-if="this.type == 3"
        >工作台</el-menu-item
      >
      <el-menu-item index="3" :class="{ 'is-active': activeIndex === '3' }">审核列表</el-menu-item>
    </el-menu>
    <component v-if="isParentLoaded" :is="selectedComponent"></component>
  </div>
</template>

<script>
import Workbench from './Workbench.vue';
import ReviewList from './ReviewList.vue';
import WorkOverview from './Overview.vue';
import { mapState } from 'vuex';
export default {
  name: 'review',
  data() {
    return {
      activeIndex: null,
      selectedComponent: WorkOverview,
      subMenuName: null,
      isParentLoaded: false,
    };
  },

  computed: {
    ...mapState('review', ['reviewList', 'total', 'finish', 'reviewerList']),
    ...mapState('user', ['id', 'type']),
  },

  methods: {
    handleSelect(index) {
      this.activeIndex = index;

      // 根据菜单项选择，设置对应的组件
      switch (index) {
        case '1':
          this.selectedComponent = WorkOverview;
          this.subMenuName = '工作概览';
          break;
        case '2':
          this.selectedComponent = Workbench;
          this.subMenuName = '工作台';
          break;
        case '3':
          this.selectedComponent = ReviewList;
          this.subMenuName = '审核列表';
          break;
        // 可以根据需要添加其他菜单项的处理逻辑
        // ...
        default:
          this.selectedComponent = null; // 或者设置为默认组件
          this.subMenuName = '';
      }
    },

    async loadData() {
      console.log('userId为 ' + this.$store.state.user.id);
      console.log('user_role为 ' + this.$store.state.user.type);
      console.log('username为 ' + this.$store.state.user.name);
      const params = {
        reviewId: this.$store.state.user.id,
        page: 1,
        pageSize: 10,
      };
      if (this.$store.state.user.type == 4) {
        await this.$store.dispatch('review/fetchAll', params);
      } else {
        await this.$store.dispatch('review/fetchforReviewer', params);
      }
    },
  },
  async mounted() {
    console.log('review的mounted触发');

    // await this.loadData();
    this.handleSelect('1');
    this.isParentLoaded = true;
    console.log('review的mounted结束');
  },
};
</script>
